<template>
    <div>
        <h3>门店列表</h3>
        <div>
            门店名称:
            <input type="text" v-model="Query.FName">
            联系方式:
            <input type="text" v-model="Query.KiPhone">
            <input type="button" class="btn btn-primary" value="查询" @click="show">
            <input type="button" value="批量删除" @click="delall()" class="btn btn-danger">
            <input type="button" value="批量启用" @click="stateall(1)" class="btn btn-primary"> 
            <input type="button" value="批量禁用" @click="stateall(0)" class="btn btn-primary">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td><input type="checkbox" v-model="checked" @click="checkall()"></td> 
                    <td align="center">门店编号</td>
                    <td align="center">门店名称</td>
                    <td align="center">分店名称</td>
                    <td align="center">分店地址</td>
                    <td align="center">图片</td>
                    <td align="center">电话</td>
                    <td align="center">状态</td>
                    <td align="center">门店介绍</td> 
                    <td align="center">入住须知</td>
                    <td align="center">交通信息</td>
                    <td align="center">操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id">
                    <td><input type="checkbox" :value="item.Id" v-model="ids" @click="checkone()"></td>     
                    <td align="center">{{ item.Id }}</td>
                    <td align="center">{{ item.MName }}</td>
                    <td align="center">{{ item.FName }}</td>
                    <td align="center">{{ item.Dizhi }}</td>
                    <td align="center"><img :src="item.Photo" alt="" height="120" ></td>
                    <td align="center">{{ item.KiPhone }}</td>
                    <td align="center">{{ item.State==1?'启用':'禁用' }}</td>
                    <td align="center">{{ item.MenDianJs }}</td>
                    <td align="center">{{ item.Ruzhu }}</td>
                    <td align="center">{{ item.JiaoTong }}</td>
                    <td align="center">
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger">
                        <input type="button" value="修改" @click="update(item.Id)" class="btn btn-success">
                        <input type="button" value="详情" @click="" class="btn btn-primary">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.TotalPage }}页</span>
            <span>共{{ data.TotalCount }}行</span>
            <span>第{{ Query.PageIndex }}/{{ data.TotalPage }}页</span>

            <input type="button" value="首页" @click="gopage(1)">
            <input type="button" value="上一页" @click="gopage(Query.PageIndex-1)">
            <span v-for="item in data.TotalPage" @click="gopage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="gopage(Query.PageIndex+1)">
            <input type="button" value="尾页" @click="gopage(data.TotalPage)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { idText } from 'typescript';
const Route = useRoute();
const Router = useRouter();

let checked:any=ref(false);

let ids:any=ref([]);

let Query:any=reactive({
    PageIndex:1,
    PageSize:3,
    FName:'',
    KiPhone:''
})
let data:any=reactive({
    TotalCount:0,
    TotalPage:0,
    list:[]
})

onMounted(()=>{
    getlist();
})

const checkall=()=>{
    checked.value=!checked.value;
    if(checked.value==true)
    {
        ids.value=data.list.map((item:any)=>{
            return item.Id;
        })
    }
    else{
        ids.value=[];
    }
}

const checkone=()=>{
    if(ids.value.length==data.list.length)
    {
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
const show=()=>{
    Query.PageIndex=1;
    getlist();
}
const gopage=(num:any)=>{
    if(num<1)
    {
        Query.PageIndex=1;
        return;
    }
    if(num>data.TotalPage)
    {
        Query.PageIndex=data.TotalPage;
        return;
    }
    Query.PageIndex=num;
    getlist();
}

const getlist=()=>{
    axios({
        url:'/api/House/GetHousesList',
        method:'get',
        params:Query
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.TotalCount=res.data.TotalCount;
        data.TotalPage=res.data.TotalPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}

const del=(id:any)=>{
    let f=confirm("是否删除?");
    if(f){
        axios({
            url:'/api/House/DelHouse',
            method:'delete',
            params:{
                id:id
            }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0)
            {
                alert("删除成功");
                getlist();
            }
            else
            {
                alert("删除失败");
                return;
            }
        })
        .catch(err=>{
            console.log(err);
            
        })
    }
}
const update=(id:any)=>{
    Router.push({
        path:'/houseupdate',
        query:{
            id:id
        }
    })
    
}
const delall=()=>{
    if(ids.value.length==0)
    {
        alert("选择项不能空");
        return;
    }
    let f=confirm("是否全部删除");
    if(f){
        axios({
        url:'/api/House/DelAll',
        method:'delete',
        params:{
            ids:ids.value.toString()
        }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0)
            {
                alert("删除成功");
                ids.value=[];
                checked.value=false
                getlist();
            }
            else{
                alert("删除失败");
                ids.value=[];
                checked.value=false
                return;
            }
        })
        .catch((err)=>{
            console.log(err);
            
        })
    }
}
const stateall=(stata:any)=>{
    if(ids.value.length==0)
    {
        alert("选择项不能空");
        return;
    }
    let f=confirm("是否启停");
    if(f){
        axios({
        url:'/api/House/StataAll',
        method:'put',
        params:{
            ids:ids.value.toString(),
            stata:stata
        }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0)
            {
                alert("修改成功");
                ids.value=[];
                checked.value=false
                getlist();
            }
            else{
                alert("修改失败");
                ids.value=[];
                checked.value=false
                return;
            }
        })
        .catch((err)=>{
            console.log(err);
            
        })
    }
}
</script>

<style scoped>
span{
    margin: 0 10px;
}
</style>